<template>
  <div class="addAddress absolute">
    <div v-if="!pageType">
      <div class="list">
        <div v-for="(item, index) in applyData" :key="index" 
          class="item"
          :class="item.title.length <= 4 && item.type !== 'upload' ? 'acea-row row-between-wrapper' :''" 
          :style="{alignItems: item.type === 'textarea' ? 'flex-start' : '', paddingTop: item.type === 'textarea' ? '.2rem' : ''}"
        >
          <div :class="item.title.length > 4 || item.type === 'upload' ? 'mt-sm' : 'name'">{{item.title}}</div>
          <div v-if="item.type === 'input'">
            <input
              :type="item.title !== '人员规模' ? 'text' : 'number'"
              :placeholder="`请填写${item.title}`"
              v-model="item.val"
              required
            />
          </div>
          <div v-if="item.type === 'textarea'" >
            <textarea v-model="item.val" cols="30" :rows="item.title === '商家介绍' ? '4' : '3'" :placeholder="`请填写${item.title}${item.title === '商家介绍' ? '，限500字内' : ''}`"></textarea>
          </div>
          <div v-if="item.type === 'radio'" style="padding: .3rem 0;" >
            <yd-radio-group v-model="item.val" color="#784efa">
              <yd-radio v-for="(radio, radioIndex) in item.list" :key="radioIndex" :val="radio.val" style="margin-left: .4rem;">{{ radio.name }}</yd-radio>
            </yd-radio-group>
          </div>
          <!-- <div v-if="item.type === 'upload'">
            <img :src="item.image" alt="upload-icon" style="width: 1rem; height:1rem;margin-top: .2rem;" @click="monitorClick">
            <input type="file" ref="file" @change="upload" id="file" style="display: none;">
            <span v-if="item.name">已上传{{item.name}}文件</span>
          </div> -->
          <div v-if="item.type === 'upload'">
            <div class="imglist acea-row row-middle">
              <div class="pictrue" v-if="item.val">
                <img :src="item.val" />
                <span
                  class="iconfont icon-guanbi1 font-color-orange"
                  @click="item.val = ''"
                ></span>
              </div>
              <VueCoreImageUpload
                class="btn btn-primary"
                :crop="false"
                compress="80"
                @imageuploaded="imageuploaded"
                :headers="headers"
                :max-file-size="5242880"
                :credentials="false"
                inputAccept="image/*"
                inputOfFile="file"
                :url="url"
                ref="upImg"
                v-else
              >
                <div
                  class="pictrue uploadBnt acea-row row-center-wrapper row-column"
                >
                  <span class="iconfont icon-icon25201"></span>
                  <div>上传图片</div>
                </div>
              </VueCoreImageUpload>
            </div>
          </div>
        </div>
      </div>
      <div class="keepBnt bg-color-main" @click="submit">确定申请</div>
    </div>
    <div v-if="pageType === 1" style="width: 60%; margin: 0 auto;">
      <div class="acea-row row-center"><img src="@/assets/images/zhenxing/common/audit.svg" alt="audit-icon" style="width: 4rem; height: 4rem; margin: 1rem auto .5rem;"></div>
      <div>
        <h2 class="text-center iconfont-md font-color-gold">入驻申请已提交<br/>正在审核中</h2>
        <p class="text-center font-base mt-sm">招商团队会在3日内确认您的入驻申请，请保持电话畅通</p>
      </div>
    </div>
  </div>
</template>
<style scoped>
.imglist{margin-top:0.25rem;padding-left:0.05rem; padding-bottom: .3rem;}
.imglist .pictrue{width:1.4rem;height:1.4rem;margin-right:.35rem;position:relative;font-size:0.22rem;color:#bbb;}
.imglist .pictrue img{width:100%;height:100%;border-radius:0.03rem;}
.imglist .pictrue .icon-guanbi1{font-size:0.45rem;position:absolute;top:-0.2rem;right:-0.2rem;}
.imglist .pictrue .icon-icon25201{color:#bfbfbf;font-size:0.5rem;}
.imglist .pictrue.uploadBnt { border: 1px solid #ddd; }
</style>
<script type="text/babel">
import District from "ydui-district/dist/jd_province_city_area_id";
import attrs, { required, chs_phone } from "@utils/validate";
import { validatorDefaultCatch } from "@utils/dialog";
import { applyMerchants, uploadFile } from "@api/user"
import { trim, VUE_APP_API_URL } from "@utils";
import VueCoreImageUpload from "vue-core-image-upload";

export default {
  components: {
    VueCoreImageUpload
  },
  data() {
    return {
      pageType: 0,
      district: District,
      applyData: {
        company: { val: '', title: '公司名称', type: 'input' },
        address: { val: '', title: '公司地址', type: 'textarea' },
        liaison: { val: '', title: '联系人', type: 'input' },
        mobile: { val: '', title: '联系电话', type: 'input' },
        people: { val: '', title: '人员规模', type: 'input' },
        factory: { val: null, title: '自主工厂', type: 'radio', list: [{name: '无', val: 0}, {name: '有', val: 1}] },
        sole: { val: null, title: '独家合作', type: 'radio', list: [{name: '否', val: 0}, {name: '是', val: 1}] },
        rule: { val: null, title: '认同桂系上品的成本定价原则？', type: 'radio', list: [{name: '不认同', val: 0}, {name: '认同', val: 1}] },
        develop: { val: null, title: '具有独立产品开发设计能力？', type: 'radio', list: [{name: '无', val: 0}, {name: '有', val: 1}] },
        supply: { val: null, title: '具有柔性供应链？', type: 'radio', list: [{name: '无', val: 0}, {name: '有', val: 1}] },
        introduce: { val: '', title: '商家介绍', type: 'textarea' },
        enclosure: { val: '', title: '上传附件', type: 'upload', image: require('@/assets/images/zhenxing/common/upload-file.svg'), name: '' }
      },
      url: `${VUE_APP_API_URL}/uploade`,
      headers: {
        "Authori-zation": "Bearer " + this.$store.state.app.token
      },
    };
  },
  mounted: function() {
  },
  methods: {
    imageuploaded(res) {
      if (res.status !== 200) return this.$dialog.error(res.msg || "上传图片失败");
      this.applyData.enclosure.val = res.data.url;
    },
    monitorClick: function() {
      document.getElementById('file').click();
    },
    upload: function(e) {
      console.log('???????????', this.$refs.file[0].files[0]);
      let formData = new FormData();
      formData.append('filename', this.$refs.file[0].files[0]);
      // console.log(formData.get("filename"));
      uploadFile(formData).then(res => {
        console.log('附件上传', res);
        this.applyData.enclosure.name = this.$refs.file[0].files[0].name;
        this.applyData.enclosure.val = res.data;
      }).catch(err => {
        this.$dialog.toast({ mes: err.msg });
      });
    },
    async submit() {
      let company = this.applyData.company.val,
        address = this.applyData.address.val,
        liaison = this.applyData.liaison.val,
        mobile = this.applyData.mobile.val,
        people = this.applyData.people.val+'',
        factory = this.applyData.factory.val != null ? this.applyData.factory.val+'' : this.applyData.factory.val,
        sole = this.applyData.sole.val != null ? this.applyData.sole.val+'' : this.applyData.sole.val,
        rule = this.applyData.rule.val != null ? this.applyData.rule.val+'' : this.applyData.rule.val,
        develop = this.applyData.develop.val != null ? this.applyData.develop.val+'' : this.applyData.develop.val,
        supply = this.applyData.supply.val != null ? this.applyData.supply.val+'' : this.applyData.supply.val,
        introduce = this.applyData.introduce.val;
      try {
        await this.$validator({
          company: [
            required(required.message(this.applyData.company.title)),
            attrs.range(required(required.message(this.applyData.company.title)))
          ],
          address: [required(required.message(this.applyData.address.title))],
          liaison: [
            required(required.message(this.applyData.liaison.title)),
            attrs.range([2, 16], attrs.range.message(this.applyData.liaison.title))
          ],
          mobile: [
            required(required.message(this.applyData.mobile.title)),
            chs_phone(chs_phone.message())
          ],
          people: [
            required(required.message(this.applyData.people.title)),
            attrs.range(required(required.message(this.applyData.people.title)))
          ],
          factory: [
            required(required.message(this.applyData.factory.title)),
            attrs.range(required(required.message(this.applyData.factory.title)))
          ],
          sole: [
            required(required.message(this.applyData.sole.title)),
            attrs.range(required(required.message(this.applyData.sole.title)))
          ],
          rule: [
            required(required.message('是否认同定价规则')),
            attrs.range(required(required.message('是否认同定价规则')))
          ],
          develop: [
            required(required.message('是否可独立开发')),
            attrs.range(required(required.message('是否可独立开发')))
          ],
          supply: [
            required(required.message('是否有柔性供应链')),
            attrs.range(required(required.message('是否有柔性供应链')))
          ],
          introduce: [
            required(required.message(this.applyData.introduce.title)),
            attrs.range(required(required.message(this.applyData.introduce.title)))
          ]
        }).validate({ company, address, liaison, mobile, people, factory, sole, rule, develop, supply, introduce });
      } catch (e) {
        console.log(e);
        return validatorDefaultCatch(e);
      }

      let that = this, data = {
        company,
        address,
        contacts: liaison,
        contacts_mobile: mobile,
        people,
        is_have: factory,
        is_sole: sole,
        is_identification: rule,
        is_design: develop,
        is_supply: supply,
        introduce,
        enclosure: that.applyData.enclosure.val
      };
      applyMerchants(data).then((res) => {
        that.$dialog.toast({ mes: "提交成功" });
        setTimeout(() => {
          for(let key in this.applyData) {
            this.applyData[key].val = this.applyData[key].type === 'radio' ? null : '';
          }
          this.pageType = 1;
        });
      }).catch(err => {
        this.$dialog.error(err.msg);
      });
    }
  }
};
</script>
